<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <title>中石化BP 招募体验官</title>
</head>
<body>

    <div class="pop-bg">
        <div class="pop-box station" id="station">
            <p>请问您是否选择</p>
            <p><span>xxx</span>油站</p>
            <p>来填写问卷？</p>
            <div class="pop-box-btns flex">
                <button id="yes">是</button>
                <button id="no">否</button>
            </div>
        </div>

        <div class="pop-box station" id="choose">
            <p>请问您想根据哪一个</p>
            <p>油站的情况来填写问卷？</p>
            <div class="select-choose-cont">
                <div class="select-choose-box">
                    <input type="text" placeholder="请选择大区" id="provinceText" />
                    <select name="province" id="provinceSelect">
                        <option value="0" style="display: none;" selected="selected"></option>
                        <option value="1">111</option>
                        <option value="2">222</option>
                        <option value="3">333</option>
                    </select>
                </div>
                <div class="select-choose-box">
                    <input type="text" placeholder="请选择区域" id="areaText" />
                    <select name="area" id="areaSelect">
                        <option value="0" style="display: none;" selected="selected"></option>
                        <option value="1">111</option>
                        <option value="2">222</option>
                        <option value="3">333</option>
                    </select>
                </div>
                <div class="select-choose-box">
                    <input type="text" placeholder="请选择油站" id="stationText" />
                    <select name="station" id="stationSelect">
                        <option value="0" style="display: none;" selected="selected"></option>
                        <option value="1">111</option>
                        <option value="2">222</option>
                        <option value="3">333</option>
                    </select>
                </div>
                <button id="next">下一步</button>
            </div>
        </div>
    </div>

    <div class="page">
        <div class="age-sexuality-box">
            <img src="images/age_title.png" width="100%" alt="" />
            <div class="age-box">
                <p>您的年龄：</p>
                <div class="age-input-box"><input type="number" /></div>
            </div>
            <div class="sexuality-box">
                <p>您的性别：</p>
                <div class="sexuality-choose-box flex">
                    <div class="sexuality-item-box male"></div>
                    <div class="sexuality-item-box female"></div>
                </div>
            </div>
            <button id="nowgo">立即出发</button>
        </div>
    </div>

    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $('.sexuality-item-box').click(function (e) {
           $('.sexuality-item-box').removeClass('onthis');
           $(this).addClass('onthis');
        });

        $('#nowgo').click(function (e) {
            $('.pop-bg').show();
            $('#station').show();
        });

        $('#yes').click(function (e) {
            window.location.href = 'question.html';
        });

        $('#next').click(function (e) {
            window.location.href = 'question.html';
        });

        $('#no').click(function (e) {
            $('#station').hide();
            $('#choose').show();
        });

        $('#provinceSelect').change(function (e) {
            $('#provinceText').val($(this).find('option:selected').html());
        });

        $('#areaSelect').change(function (e) {
            $('#areaText').val($(this).find('option:selected').html());
        });

        $('#stationSelect').change(function (e) {
            $('#stationText').val($(this).find('option:selected').html());
        });
    </script>
</body>
</html>